import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 引入第三方库
import element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(element);


import { registerMicroApps, start } from 'qiankun'

Vue.config.productionTip = false

const microAppNum = 2 // 子项目数量
let apps = [];
// 在主应用中注册微应用
for (let i = 1; i <= microAppNum; i++) {
    apps.push(
        {
            name: '子应用child0' + i,
            entry: 'http://localhost:90' + i + '0',
            container: '#vue',
            activeRule: '/child0' + i,
            props: { param01: i }
        }
    );
}
// 一旦浏览器的 url 发生变化，便会自动触发 qiankun 的匹配逻辑，所有 activeRule 规则匹配上的微应用就会被插入到
// 指定的 container 中，同时依次调用微应用暴露出的生命周期钩子。

const config = {
    beforeLoad: [
        app => {
            console.log("%c before load",
                'background:#0f0 ; padding: 1px; border-radius: 3px;  color: #fff',
                app);
        }
    ], // 挂载前回调
    beforeMount: [
        app => {
            console.log("%c before mount",
                'background:#f1f ; padding: 1px; border-radius: 3px;  color: #fff',
                app);
        }
    ], // 挂载后回调
    afterUnmount: [
        app => {
            console.log("%c after unload",
                'background:#a7a ; padding: 1px; border-radius: 3px;  color: #fff',
                app);
        }
    ] // 卸载后回调
}
registerMicroApps(apps, config);
let option = { prefetch: false }
start();


new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')
